<template>
  <el-form ref="form" :model="form" label-width="100px" style="margin-top: 20px">
    <el-form-item class="form-item" label="班级名称:" :required="true">
      <el-input v-model="form.name" :class="Style.nameStyle" type="text" style="width: 200px;" @blur="validateClassname" />
      <span>{{ Tip.nametip }}</span>
    </el-form-item>

    <el-form-item class="form-item" label="课程类型:">
      <el-select v-model="form.type" placeholder="课程类型" value="">
        <el-option
          v-for="item in classtype"
          :key="item"
          :label="item"
          :value="item"
          :disabled="item.disabled"
        />
      </el-select>
    </el-form-item>

    <el-form-item class="form-item" label="负责教师:">
      <el-select v-model="form.teach" placeholder="课程类型" value="">
        <el-option label="无" value="无" />
        <el-option
          v-for="item in teacher"
          :key="item.name"
          :label="item.name"
          :value="item.name"
        />
      </el-select>
    </el-form-item>

    <el-form-item class="form-item" label="开班日期:" :required="true">
      <el-date-picker
        v-model="form.time"
        :class="Style.timeStyle"
        style="width: 200px"
        type="datetime"
        :picker-options="pickerOptions"
        value-format="yyyy-MM-dd"
        format="yyyy-MM-dd"
        placeholder="选择开班时间"
        @blur="validateTime"
      />
      <span>{{ Tip.timetip }}</span>
    </el-form-item>
    <el-button type="primary" :loading="isloading" style="margin-left: 100px;width: 200px" @click="create">创建班级</el-button>
  </el-form>
</template>

<script>
import { createClass } from '../../api/class'
import { fetchTeacherList } from '../../api/teacher'
export default {
  name: 'Create',
  data() {
    return {
      isloading: false,
      form: {
        name: '',
        time: undefined,
        type: '春季班',
        teach: ''
      },
      Tip: {
        nametip: '',
        timetip: ''
      },
      Style: {
        nameStyle: '',
        timeStyle: ''
      },
      // 限制可选择时间为当日之后
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7
        }
      },
      // 课程类型选项
      classtype: ['春季班', '秋季班', '暑期班', '寒假班', '集训课'],
      // 课程类型选项
      teacher: null
    }
  },
  computed: {
    displayTime: {
      get() {
        return (+new Date(this.form.time))
      },
      set(val) {
        this.form.time = new Date(val)
      }
    }
  },
  created() {
    this.teacherList()
  },
  methods: {
    validateClassname() {
      const reg = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{2,10}$/
      if (!reg.test(this.form.name)) {
        this.Tip.nametip = '班级名称须为2-10位中英文或数字'
        this.Style.nameStyle = 'danger'
        return false
      } else {
        this.Tip.nametip = ''
        this.Style.nameStyle = 'success'
        return true
      }
    },
    validateTime() {
      if (this.form.time === undefined) {
        this.Tip.timetip = '开班时间不能为空'
        this.Style.timeStyle = 'danger'
        return false
      } else {
        this.Tip.timetip = ''
        this.Style.timeStyle = 'success'
        return true
      }
    },
    teacherList() {
      fetchTeacherList().then(response => {
        this.teacher = response.data.items
      }).catch(() => {
        this.$ERROR('获取教师信息失败')
      })
    },
    create() {
      if (this.validateClassname() && this.validateTime()) {
        this.isloading = true
        createClass(this.form).then(() => {
          this.$SUCCESS('班级创建成功')
          this.form = this.$options.data().form
          this.isloading = false
        }).catch(() => {
          this.$ERROR('删除班级失败')
          this.isloading = false
        })
      }
    }
  }
}
</script>

<style scoped>
span{
    color: rgb(251,114,153);
    margin-left: 10px
}
.form-item{
    display: block;
    margin-bottom: 30px;
}
.success /deep/ input{
    border-color: #67c23a;
}
.danger /deep/ input{
    border-color: #f56c6c;
}
</style>
